<template>
  <div>
    <el-form ref="myform" :model="formItem" :rules="rules" label-width="120px" size="mini">
      <el-form-item label="货品编号" prop="storckNumber">
        <el-input v-model="formItem.storckNumber" placeholder="货品编号" :maxlength="255">
          <i slot="suffix" class="el-input__icon el-icon-question" title="货品编号必须是唯一的，如果不设置货品编号，系统将按照您设置的规则自动生成货品编号" />
        <!-- </el-tooltip> -->
        </el-input>
      </el-form-item>
      <el-form-item label="备品备件分类" prop="spareTypeId">
        <treeselect
          v-model="formItem.spareTypeId"
          :multiple="false"
          :options="typeOptions"
          placeholder="选择备品备件类型"
          @select="treeSelected"
        />
      </el-form-item>
      <el-form-item label="规格型号" prop="specification">
        <el-input v-model="formItem.specification" />
      </el-form-item>
      <el-form-item label="SN" prop="sn">
        <el-input v-model="formItem.sn" placeholder="请输入SN" />
      </el-form-item>
      <el-form-item label="存放库房" prop="storehouseId">
        <el-select v-model="formItem.storehouseId" clearable placeholder="请选择仓库" @change="changewarehouse">
          <el-option v-for="(item) in storehouses" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  tree
} from '@neu/dcam-ui/api/spareType'
import { list as storehouseList } from '@neu/dcam-ui/api/storehouse'
const formItem = {
  storckNumber: '',
  spareTypeId: null,
  specification: '',
  storehouseId: null,
  spareTypeName: '',
  sn: ''
  // spareTypeName: ''
}
export default {
  data() {
    return {
      formItem: {
        ...formItem
      },
      /** 仓库 */
      storehouses: [],
      typeOptions: [],
      // 表单验证规则
      rules: {
        storckNumber: [{ max: 250, message: '长度不能超过100', trigger: 'blur' }],
        storehouseId: [{ required: true, message: '选择类型仓库', trigger: 'change' }],
        spareTypeId: [
          { required: true, message: '备品备件分类不能为空', trigger: 'change' }
        ],
        specification: [{ max: 250, message: '规格型号长度不能超过100', trigger: 'blur' }],
        sn: [{ required: true, message: 'SN不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.tree()
    storehouseList().then(response => {
      this.storehouses = response.data
    })
  },
  methods: {
    treeSelected(node) {
      this.formItem.spareTypeName = (node && node.title) || ''
    },
    reset() {
      this.$refs.myform.resetFields()
      this.formItem = { ...formItem }
    },
    changewarehouse(node) {
      const houses = this.storehouses.filter(r => r.id === node)
      this.formItem.storehouseName = (houses && houses.length > 0 && houses[0].name) || ''
    },
    tree() {
      tree().then(response => {
        this.typeOptions = response.data
      })
    }
  }
}
</script>
